<template>
  <div class="loading-one" v-show="showLoading"></div>
</template>

<script>
  export default {
    name: 'LoadingOne',
    data() {
      return {
        showLoading: false
      }
    },
    methods: {
      show() {
        this.showLoading = true
      },
      hidden() {
        this.showLoading = false
      }
    },
    mounted() {},
  }
</script>

<style>
  .loading-one {
    position: fixed;
    z-index: 9999;
    left: 0;top: 0;bottom: 0;right: 0;
    margin: auto;
    width: 5rem;
    height: 5rem;
    line-height: 10rem;
    text-align: center;
    background-color: #ff4545;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
    color: white;
  }

  @-webkit-keyframes rotateplane {
    0% {
      -webkit-transform: perspective(500px)
    }

    50% {
      -webkit-transform: perspective(500px) rotateY(180deg)
    }

    100% {
      -webkit-transform: perspective(500px) rotateY(180deg) rotateX(180deg)
    }
  }

  @keyframes rotateplane {
    0% {
      transform: perspective(500px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg)
    }

    50% {
      transform: perspective(500px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(500px) rotateX(-180.1deg) rotateY(0deg)
    }

    100% {
      transform: perspective(500px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(500px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }
</style>